<mat-table #table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="transaction_id">
    <mat-header-cell *matHeaderCellDef mat-sort-header>{{
      "transaction_id" | i18n
      }}</mat-header-cell>
    <mat-cell *matCellDef="let transaction">
      <a
        [routerLink]="['/transactions/transaction', transaction.transaction]"
      >{{ transaction.transaction }}</a
      >
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="attachment">
    <mat-header-cell *matHeaderCellDef mat-sort-header>
      <mat-icon>mail</mat-icon>
    </mat-header-cell>
    <mat-cell *matCellDef="let transaction">
      <span *ngIf="transaction.attachment">
        <mat-icon>mail</mat-icon>
      </span>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="timestamp">
    <mat-header-cell *matHeaderCellDef mat-sort-header>
      <mat-icon>schedule</mat-icon>&nbsp;{{"date" | i18n}}
    </mat-header-cell>
    <mat-cell
      *matCellDef="let transaction"
      title="{{
        convertTimestamp(transaction.timestamp) | date: 'MMM d, y, h:mm:ss'
      }}"
    >
      {{ convertTimestamp(transaction.timestamp) | timeAgo }}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="type">
    <mat-header-cell *matHeaderCellDef mat-sort-header></mat-header-cell>
    <mat-cell *matCellDef="let transaction">
      {{ getTransactionNameFromType(transaction) | i18n }}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="amount">
    <mat-header-cell *matHeaderCellDef mat-sort-header>
      <mat-icon>local_atm</mat-icon>
    </mat-header-cell>
    <mat-cell *matCellDef="let transaction">
      <div [ngClass]="{fg_green: !isAmountNegative(transaction), fg_red: isAmountNegative(transaction)}">
        {{getAmount(transaction) | number: "1.0-4":this.locale }}
      </div>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="fee">
    <mat-header-cell *matHeaderCellDef mat-sort-header>
      <mat-icon>compare_arrows</mat-icon>&nbsp;{{ "fee" | i18n }}
    </mat-header-cell>
    <mat-cell *matCellDef="let transaction">
      {{
      convertNQTStringToNumber(transaction.feeNQT) | number: "1.0-4":this.locale
      }}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="account">
    <mat-header-cell *matHeaderCellDef mat-sort-header>
      <mat-icon>account_box</mat-icon>&nbsp;{{ "account" | i18n }}
    </mat-header-cell>
    <mat-cell *matCellDef="let transaction">
      <ng-container *ngIf="isOwnAccount(transaction.senderRS)">
        <a *ngIf="!isMultiOutPayment(transaction)"
           [routerLink]="['/account', transaction.recipient]">{{
          transaction.recipientRS
          }}</a>
        <div *ngIf="isMultiOutPayment(transaction)">
          Multiple Recipients
        </div>
      </ng-container>
      <a [routerLink]="['/account', transaction.sender]" *ngIf="!isOwnAccount(transaction.senderRS)">{{
        transaction.senderRS
        }}</a>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="confirmations">
    <mat-header-cell *matHeaderCellDef mat-sort-header>{{
      "confirmations" | i18n
      }}</mat-header-cell>
    <mat-cell *matCellDef="let transaction">
      <span *ngIf="transaction.confirmations">{{
        transaction.confirmations
        }}</span>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"
           [class]="row.confirmations ? 'confirmed': 'unconfirmed'"></mat-row>
</mat-table>

<mat-paginator
  *ngIf="paginationEnabled"
  #paginator
  [pageSize]="10"
  [pageSizeOptions]="[10, 20, 50]"
  [showFirstLastButtons]="true"
>
</mat-paginator>
